<template>
  <div id="category">
    <el-button type="danger" @click="addFirst({type: 'category_first_add'})">添加一级分类</el-button>
    <hr class="hr-e9e9e9" />
    <div>
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="category-wrap">
            <div class="category" v-for="item in category.item" :key="item.id">
              <h4>
                <svg-icon icon-class="plus"></svg-icon>
                {{ item.category_name }}
                <div class="button-group">
                  <el-button size="mini" type="danger" @click="editCategory({ data: item, type: 'category_first_edit' })" round>编辑</el-button>
                  <el-button size="mini" type="success" round @click="handlerAddChildren({ data: item, type: 'category_children_add' })">添加子级</el-button>
                  <el-button size="mini" round @click="deleteCategoryConfirm(item.id)">删除</el-button>
                </div>
              </h4>
              <ul v-if="item.children">
                <li v-for="childrenItem in item.children" :key="childrenItem.id">
                  {{ childrenItem.category_name }}
                  <div class="button-group">
                    <el-button size="mini" type="danger" round>编辑</el-button>
                    <el-button size="mini" round>删除</el-button>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <h4 class="menu-title">一级分类编辑</h4>
          <el-form label-width="142px" class="from-wrap" ref="categoryFrom">
            <el-form-item label="一级分类名称：" v-if="category_first_input">
              <el-input v-model="form.categoryName" :disabled="category_first_disabled"></el-input>
            </el-form-item>
            <el-form-item label="二级分类名称：" v-if="category_children_input">
              <el-input v-model="form.secCategoryName" :disabled="category_children_disabled"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="submit" :loading="submit_button_loading" :disabled="submit_button_disabled">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { AddFirstCategory, DeleteCategory, EditCategory, AddChildrenCategory } from '@/api/news'
import { reactive, ref, onMounted, watch } from '@vue/composition-api'
import { global } from '@/utils/global'
import { common } from '@/api/common'
export default {
  name: "category",
  setup (props, { root }) {
    const { str: aaa, confirm } = global()
    const { getInfoCategory, categoryItem } = common()
    const form = reactive({
      categoryName: "",
      secCategoryName: ""
    })
    const category = reactive({
      item: [],
      current: []
    })
    const subit_button_type = ref('')
    const submit_button_loading = ref(false)
    const category_first_input = ref(true)
    const category_children_input = ref(true)
    const category_first_disabled = ref(true)
    const category_children_disabled = ref(true)
    const submit_button_disabled = ref(true)
    const deleteId = ref();
    /**
     * methods
     */
    const submit = () => {
      if (subit_button_type.value === 'category_first_add') {
        addFirstCategory()
      }
      if (subit_button_type.value === 'category_first_edit') {
        editFirstCategory()
      }
      if (subit_button_type.value === 'category_children_add') {
        addChildrenCategory()
      }
    }
    const addFirstCategory = () => {
      if (!form.categoryName) {
        root.$message({
          message: "分类信息不能为空！！！",
          type: "error"
        })
        return false
      }
      // 按钮加载状态
      submit_button_loading.value = true
      AddFirstCategory({ categoryName: form.categoryName}).then(response => {
        let data = response.data
        root.$message({
          message: data.message,
          type: "success"
        })
        category.item.push(data.data)
        submit_button_loading.value = false
        form.categoryName = ''
        form.secCategoryName = ''
      }).catch(error => {
        submit_button_loading.value = false
        form.secCategoryName = ''
      })
    }
    const addFirst = (params) => {
      subit_button_type.value = params.type
      category_first_input.value = true
      category_children_input.value = false
      submit_button_disabled.value = false
      category_first_disabled.value = false
    }
    const handlerAddChildren = (params) => {
      // 存储数据
      category.current = params.data
      form.categoryName = params.data.category_name
      subit_button_type.value = params.type
      category_first_disabled.value = true
      category_children_input.value = true
      category_children_disabled.value = false
      submit_button_disabled.value = false
    }
    const deleteCategoryConfirm = (categoryId) => {
      deleteId.value = categoryId
      confirm({
        content: "确认删除选择的数据，确认后将无法恢复！",
        tip: "警告",
        fn: deleteCategory,
        catchFn: () => { deleteId.value = '' }
      })
    }
    const deleteCategory = () => {
      DeleteCategory({ categoryId: deleteId.value }).then(response => {
        let index = category.item.findIndex(item => item.id === deleteId.value)
        category.item.splice(index, 1)
        /*let newData = category.item.filter(item => item.id !== deleteId)
        category.item = newData*/
      }).catch(error => {

      })
    }
    const editCategory = (params) => {
      subit_button_type.value = params.type
      category_children_input.value = false
      category_first_disabled.value = false
      submit_button_disabled.value = false
      form.categoryName = params.data.category_name
      category.current = params.data
    }
    const editFirstCategory = () => {
      if (category.current.length ===0) {
        root.$message({
          message: "未选择分类",
          type: "error"
        })
        return
      }
      let requestData = {
        id: category.current.id,
        categoryName: form.categoryName
      }
      EditCategory(requestData).then(response => {
        let data = response.data
        if ( data.resCode === 0) {
          root.$message({
            message: data.message,
            type: "success"
          })
          category.current.category_name = data.data.data.categoryName
          // 清空输入框
          form.categoryName = ''
          category.current = []
        }
      }).catch(error => {

      })
    }

    const addChildrenCategory = () => {
      let requestData = {
        parentId: category.current.id,
        categoryName: form.secCategoryName
      }
      if (!form.secCategoryName) {
        root.$message({
          message: "子级分类信息不能为空！！！",
          type: "error"
        })
        return false
      }
      // 按钮加载状态
      submit_button_loading.value = true
      AddChildrenCategory(requestData).then(response => {
        let data = response.data
        root.$message({
          message: data.message,
          type: "success"
        })
        getInfoCategory()
        submit_button_loading.value = false
        form.categoryName = ''
        form.secCategoryName = ''
      }).catch(error => {
        submit_button_loading.value = false
        form.categoryName = ''
        form.secCategoryName = ''
      })
    }
    /**
     * 生命周期
     */
    onMounted(() => {
      getInfoCategory()
    })
    /**
     * 监听
     */
    watch(() => categoryItem.item, (value) => {
      category.item = value
    })
    return {
      form, category_first_input, category_children_input,subit_button_type,submit_button_loading,
      submit_button_disabled,category_first_disabled,category_children_disabled,
      category,deleteId,
      submit, addFirst,deleteCategoryConfirm,deleteCategory,editCategory,
      addFirstCategory,handlerAddChildren,addChildrenCategory
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
.category-wrap {
  div:first-child {
    &:before { top: 20px; }
  }
  div:last-child {
    &:before { bottom: 22px; }
  }
}
.menu-title {
  line-height: 44px;
  padding-left: 22px;
  background-color: #f3f3f3;
}
.category {
  position: relative;
  line-height: 44px;
  cursor: pointer;
  &:before {
    content: '';
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 32px;
    border-left: 1px dotted #000;
  }
  h4 {
    position: relative;
    padding-left: 40px;
  }
  svg {
    position: absolute;
    left: 14px;
    top: 15px;
    background-color: #fff;
    font-size: 17px;
  }
  li {
    position: relative;
    padding-left: 36px;
    margin-left: 24px;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 20px;
      width: 32px;
      border-bottom: 1px dotted #000;
    }
  }
  li, h4 {
    @include webkit(transition, all .5s ease 0s);
    &:hover {
      background-color: #f3f3f3;
      .button-group { display: block; }
    }
  }
}
.button-group {
  display: none;
  position: absolute;
  z-index: 2;
  right: 11px;
  top: -1px;
  button { font-size: 12px; }
}
.from-wrap {
  width: 410px;
  padding-top: 26px;
}
.hr-e9e9e9 {
  width: calc(100% + 60px);
  margin-left: -30px;
  border: none;
  margin-top: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e9e9e9;
}
</style>
